<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1 {
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 10px;
				border: 10px solid yellow;
			}
			
			#box2 {
				position: relative;
				padding: 100px;
				background-color: #bfa;
			}
			
			#box4 {
				width: 200px;
				height: 300px;
				background-color: #bfa;
				overflow: auto;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function() {
				var btn = document.getElementById("btn");
				var box1 = document.getElementById("box1");
				var box4 = document.getElementById("box4");
				
				btn.onclick = function() {
					/*
					 * clientWidth  
					 * clientHeight 
					 * 	- 获取元素的可见宽度和高度，包括内容区和内边距，不包括边框border
					 * 	- 返回的属性值是一个数字，不带px，可以直接进行计算
					 *  - 这些属性都是只读的，不能修改
					 */
					console.log(box1.clientWidth);  // 120 width + padding
					
					/*
					 * offsetWidth
					 * offsetHeight
					 * 	- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
					 */
					console.log(box1.offsetWidth); // 140 width + padding + border
					
					/*
					 * offsetParent
					 * 	- 可以用来获取当前元素的定位父元素
					 *  - 会获取到离当前元素最近的开启了定位的祖先元素
					 * 		如果所有的祖先元素都没有开启定位，则返回body
					 */
					var op = box1.offsetParent;
					// console.log(op);
					
					/*
					 * offsetLeft
					 * 	- 当前元素相对于其定位父元素的水平偏移量
					 * offsetTop
					 * 	- 当前元素相对于其定位父元素的垂直偏移量
					 */
					
					console.log(box1.offsetLeft); 
					
					/*
					 * scrollWidth
					 * scrollHeight
					 * 	- 可以获取元素整个滚动区域的宽度和高度
					 */
					console.log(box4.scrollWidth);
					console.log(box4.scrollHeight);
					
					/*
					 * scrollLeft
					 * 	- 可以获取水平滚动条滚动的距离
					 * scrollTop
					 * 	- 可以获取垂直滚动条滚动的距离
					 */
					console.log(box4.scrollLeft);
					console.log(box4.scrollTop);
					
					//alert(box4.clientHeight); // 283
					
					// 当满足scrollHeight - scrollTop == clientHeight
					// 说明垂直滚动条滚动到底了
					if(box4.scrollHeight - box4.scrollTop <= box4.clientHeight) {
						alert("到底了");
					}

					if(box4.scrollHeight - box4.scrollTop - 10 <= box4.clientHeight) {
						alert("距离底部在10px范围内");
					}
					
					// 当满足scrollWidth - scrollLeft == clientWidth
					// 说明水平滚动条滚动到底
					// alert(box4.scrollHeight - box4.scrollTop); 
					
				};
				
			};
			
			
		</script>
	</head>
	<body id="body">
		<button id="btn">点我一下</button>
		<div id="box2">
			<div id="box1"></div>
		</div>
		<br><br> 

		<div id="box4">
			Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex harum et asperiores minus non officiis, at quae sapiente qui pariatur voluptates voluptatibus, quaerat distinctio ut dicta temporibus rerum dignissimos enim!
			Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam voluptatibus nulla eos aspernatur nisi deserunt labore mollitia fugiat cumque pariatur vitae sint animi vero impedit, aut odio, culpa in veniam?Soluta praesentium culpa eaque sed commodi officiis quia facilis consequuntur, enim omnis hic magni asperiores vero vitae tempore quibusdam temporibus nostrum earum aspernatur? Veniam modi, praesentium delectus molestias quod quis!
		</div>
		<br><br>
		
	</body>
</html>
